<template>
  <div>
    <div v-if="guodu">
      <spinner></spinner>
    </div>
    <div>{{ajax_error}}</div>
    <div v-if="movieMsg">
      <title-bar :title="this.movieMsg.title" @click="goBack"/>

      <div class="msg-movie clearfix">
          <div class="posts">
            <img class="img-thumbnail" :src="movieMsg.images.medium">
          </div>
          <div class="details">
            <h3>{{movieMsg.title}}</h3>
            <star :score="movieMsg.rating.average"></star>
            <p>{{movieMsg.rating.average}}分({{movieMsg.collect_count}}人评分)</p>
            <p>{{movieMsg.year}}年</p>
            <p>{{movieMsg.genres.join(',')}}</p>
            <p>{{movieMsg.countries.join(',')}}</p>
            <p>{{movieMsg.mainland_pubdate}}({{movieMsg.countries.join(',')}})</p>
          </div>
        </div>
      <div class="movie-counter">
        <span>{{movieMsg.reviews_count}}人看过</span>
        <span>{{movieMsg.wish_count}}人想看</span>
      </div>
      <div class="content">
        <div class="movie-summary">
          {{movieMsg.summary}}
        </div>
        <div class="players">
          <h3>演职人员</h3>
          <!--
          <text-justify-list class="photo-list" :items="movieMsg.casts">
            <template scope="props">
              <span class="text-justify-list">
                <a><img :src="props.item.avatars.small" :alt="props.item.name"></a>
                <p>{{props.item.name+"(导演)"}}</p></span>&nbsp;
            </template>
            <template slot="fix">
              <span class="justify_fix"></span>
            </template>
          </text-justify-list>
          -->
          <div class="photos">
            <span v-for="item in movieMsg.directors" class="photo" @click="starMsg(item.id)">
              <a><img :src="item.avatars.small" :alt="item.name"></a>
              <p>{{item.name+"(导演)"}}</p>
            </span><span v-for="item in movieMsg.casts" class="photo" @click="starMsg(item.id)">
              <a><img :src="item.avatars.small" :alt="item.name"></a>
              <p>{{item.name}}</p>
            </span>
          </div>
        </div>
        <el-collapse v-model="activeName" @change="onchange">
          <el-collapse-item title="热门短评" name="hotShortComments">
            <div v-for="comment in movieMsg.popular_comments" class="comment">
                <star :score="comment.rating.value"></star>&nbsp;&nbsp;
                <span>{{comment.created_at}}</span>
                <p class="comment-content">{{comment.content}}</p>
                <div>
                  <img style="border-radius: 50%" :src="comment.author.avatar">&nbsp;&nbsp;
                  <span class="author-name">{{comment.author.name}}</span>
                </div>
              </div>
          </el-collapse-item>
          <el-collapse-item title="全部短论" name="allShortComments" v-loading="shortComments.guodu" element-loading-text="拼命加载中">
            <div id="shortComments_guodu" v-if="shortComments.guodu">
            </div>
            <div v-if="!shortComments.guodu">
              <div v-for="comment in shortComments.comments" class="comment">
                <star :score="comment.rating.value"></star>&nbsp;&nbsp;
                <span>{{comment.created_at}}</span>
                <p class="comment-content">{{comment.content}}</p>
                <div class="itemFooter">
                  <img style="border-radius: 50%" :src="comment.author.avatar">&nbsp;&nbsp;
                  <span class="author-name">{{comment.author.name}}</span>
                </div>
              </div>
            </div>
          </el-collapse-item>
          <el-collapse-item title="全部影评" name="allMovieComments" v-loading="movieComments.guodu" element-loading-text="拼命加载中">
            <div id="movieComments_guodu" v-if="movieComments.guodu">
            </div>
            <div v-if="!movieComments.guodu">
              <div v-for="comment in movieComments.comments" class="comment">
                <star :score="comment.rating.value"></star>&nbsp;&nbsp;
                <span>{{comment.created_at}}</span>
                <p class="comment-content">{{comment.summary}}</p>
                <div class="itemFooter">
                  <img style="border-radius: 50%" :src="comment.author.avatar">&nbsp;&nbsp;
                  <span class="author-name">{{comment.author.name}}</span>
                  <span class="approves">{{comment.useful_count}}赞同</span>
                </div>
              </div>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
  </div>
</template>

<script>
  import jsonp from 'jsonp'
  import star from './v-star/star.vue'
  import spinner from './spinner/spinner.vue'
  import textJustifyList from './text-justify-list/text-justify-list.vue'
  import titleBar from './TitleBar/title-bar.vue'

  export default {
    components: {
      'star': star,
      'spinner': spinner,
      'text-justify-list': textJustifyList,
      'title-bar': titleBar
    },
    data () {
      return {
        guodu: true,
        activeName: '',
        movieMsg: null,     // 电影信息
        shortComments: {    // 所有短评
          guodu: false,
          start: 10,
          count: 20,
          comments: null,
          loadError: null
        },
        movieComments: {    // 所有影评
          guodu: false,
          start: 0,
          count: 10,
          comments: null,
          loadError: null
        },
        ajax_error: null
      }
    },

    mounted () {
      this.activeName = 'hotShortComments'
      this.loadHotComments()
    },

    methods: {
      goBack () {
        this.$router.go(-1)
      },

      starMsg (starId) {
        this.$router.push('/starMsg/' + starId)
      },

      loadHotComments () {
        let vm = this
        vm.guodu = true
        const url = 'https://api.douban.com/v2/movie/subject/' + this.$route.params.id + '?apikey=0b2bdeda43b5688921839c8ecb20399b&city=%E5%8C%97%E4%BA%AC&client=something&udid=dddddddddddddddddddddd'
        jsonp(url, {timeout: 5000}, function (err, data) {
          if (err) {
            vm.ajax_error = err.message
            console.log(err.message)
          } else {
            vm.movieMsg = data
            console.log(data)
          }
          vm.guodu = false
        })
      },

      loadShortComments () {
        this.shortComments.loadError = null
        this.shortComments.guodu = true
        let vm = this
        const url = 'https://api.douban.com/v2/movie/subject/' + this.$route.params.id + '/comments?apikey=0b2bdeda43b5688921839c8ecb20399b&start=' + this.shortComments.start + '&count= ' + this.shortComments.count + '&client=something&udid=dddddddddddddddddddddd'
        jsonp(url, {timeout: 5000}, function (err, data) {
          if (err) {
            vm.shortComments.loadError = err.message
            console.log(err.message)
          } else {
            vm.shortComments.comments = data.comments
            console.log('shortComments:')
            console.log(vm.shortComments)
          }

          vm.shortComments.guodu = false
        })
      },

      loadMovieComments () {
        this.movieComments.loadError = null
        this.movieComments.guodu = true
        let vm = this
        const url = 'https://api.douban.com/v2/movie/subject/' + this.$route.params.id + '/reviews?apikey=0b2bdeda43b5688921839c8ecb20399b&start=0&count=20&client=something&udid=dddddddddddddddddddddd'
        jsonp(url, {timeout: 5000}, function (err, data) {
          if (err) {
            vm.movieComments.loadError = err.message
            console.log(err.message)
          } else {
            vm.movieComments.comments = data.reviews
            console.log('movieComments:')
            console.log(vm.movieComments)
          }

          vm.movieComments.guodu = false
        })
      },

      onchange (names) {
        console.log('onchange: ' + names)
        if (names.indexOf('allMovieComments') !== -1 &&
            this.movieComments.comments === null) {
          this.loadMovieComments()
        } else if (names.indexOf('allShortComments') !== -1 &&
                   this.shortComments.comments === null) {
          this.loadShortComments()
        }
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>

  $padding-width: 15px;

  h3{
    font-size: 16px;
    font-weight: 700;
    margin: 5px 0;
  }

  .header{
    background-color: #e54847;
    color: #fff;

    position: relative;
    height: 50px;

    text-align: center;
    font-size: 20px;
    line-height: 50px;

    .icon{
      line-height: 50px;
      font-size: 20px;

      position: absolute;
      left: 20px;
      top: 0;

      span{
        display: inline-block;
        width: 15px;
        height:15px;
        border-left: 2px white solid;
        border-bottom: 2px white solid;
        transform: rotate(45deg)
      }
    }
  }

  .msg-movie{
    position: relative;
    padding:  $padding-width;

    color: #6b6868;
    background-color: #b4b1b1;


    $img-width: 100px;

    .posts{
      /*position: absolute;*/
      /*left:     10px;*/
      /*top:      10px;*/
      /*bottom:   10px;*/

      float: left;

      width: $img-width;
      height: 145px;

      font-size: 0;
      text-align: right;

      img{
        box-sizing: border-box;
        display: inline-block;   /*inline模式*/
        max-width: 100%;
        max-height: 100%;
        height: auto;
        border: 1px solid #fff;  /*边框*/
      }
    }

    .details{

      margin-left: $img-width + 10px;
    }
  }

  .movie-counter
  {
    margin: $padding-width;
    text-align: center;
    font-size: 0;

    span{
      display: inline-block;
      border-radius: 4px;
      padding: 5px 10px;
      width: 100px;

      background-color: #e54847;
      color: #fff;

      font-size: 14px;
      line-height: 20px;

      overflow: hidden;
    }

    span + span
    {
      margin-left: 50px;
    }
  }

  .content {
    margin: $padding-width;

    .movie-summary {

      text-align: justify;
      text-indent: 2em;

      font-size: 14px;
      color: #555;
    }

    /*列表父容器*/
    .players {
      .photos {
        overflow: scroll;
        white-space: nowrap;

        padding: 10px 0;
      }

      /*列表元素*/
      .photo {
        display: inline-block;
        width: 70px;
        text-align: center;
        vertical-align: top;

        cursor: pointer;

        p {
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }

      .photo + .photo {
        margin-left: 10px;
      }
    }

    .comment{
      .comment-content{
        margin: 10px 0;
        text-indent: 2em;
      }

      .itemFooter{
        font-size: 12px;
        line-height: 48px;

        img{
          vertical-align: middle;
        }
        span{
          display: inline-block;
        }

        .author-name {
          color: #999;
          vertical-align: middle;
        }
        .approves {
          float: right;
        }
      }
    }

    .comment+.comment{
      border-top: 1px solid #d6d3d3;
      margin-top: 10px;
    }
  }

  .photo-list{text-align:justify;} /*列表父容器*/
  .text-justify-list{display:inline-block; width:70px; text-align:center; vertical-align:top;}/*列表元素*/
  .justify_fix{display:inline-block; width:100%; height:0; overflow:hidden;}/*末行悲剧变喜剧*/
</style>
